<template>
  <div id="app">
    <van-cell-group title="基本使用">
      <van-field 
        required
        label="用户名"
        v-model="form.username"
        placeholder="请输入用户名"
        v-vcc-field="'form.username'"
        :error-message="vccTest.api().getMessagesOne('form.username')"
        />
    </van-cell-group> 

    <van-button type="primary" block @click="submit">提交</van-button>

  </div>
</template>
<script>
export default {
  data() {
      return {
          vccTest: new this.VccValidate(),
          form: {
              username: ''
          }
      }
  },
  methods: {
      initVcc() {
          console.log('initVcc')
          this.vccTest.init(this, {
              openWarningLine: true,
              fields: {
                  'form.username': {
                      validators: {
                          notEmpty: {
                              message: "请填写必填信息"
                          },
                          length: {
                              max: 10,
                              min: 2,
                              message: "最小2个字,最大10字"
                          }
                      }
                  }
              }
          })
      },
      test(){
        var msg = this.vccTest.api().getMessagesOne('form.username')
        console.log('msg', msg)
      },
      submit(){
        this.vccTest.api().validate()
        let isValid = this.vccTest.api().isValid()
        console.log('isValid',isValid)
      }
  },
  mounted() {
    // console.log('this', this)
    this.initVcc()
  }
}
</script>
<style>
body{
  margin: 0;
  overflow-x: auto;
  color: #323233;
  font-size: 16px;
  font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f7f8fa;
  -webkit-font-smoothing: antialiased;
}
.my_nav_mask{
  font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
line-height: 1.5;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: 0;
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background-color: rgba(0,0,0,.3);
}
.my_nav{
  font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
line-height: 1.5;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: 0;
position: relative;
z-index: 8;
height: 44px;
}
</style>
